<template>
  <view :data-theme="globPrimary">
    <u-navbar title="评论"></u-navbar>
    <view class="reply-wrap">
      <edu-mescroll-body
        height="calc(100vh - 44px - 110rpx)"
        @init="mescrollInit"
        @down="refresh"
        @up="getReply"
      >
        <view class="comment" v-if="!$u.test.empty(comment)">
          <view class="heart-photo"
            ><u-avatar
              :src="comment.avatar_url"
              size="64"
              @click="onUser(comment.user_id)"
            ></u-avatar
          ></view>
          <view class="right">
            <view class="user-info"></view>
            <view class="name">{{ comment.nick_name }}</view>
            <view class="content">{{ comment.content }}</view>
            <view class="bottom">
              <view class="date">{{ comment.create_time | timeFrom('yyyy-mm-dd') }}</view>
              <view
                v-if="glob_user_id == comment.user_id"
                class="del"
                @click="handleDeleteComment(comment.id)"
                >删除</view
              >
              <view class="like" :class="{ highlight: comment.like }" @tap="getLike">
                <u-icon
                  :name="comment.like ? 'thumb-up-fill' : 'thumb-up'"
                  :size="40"
                  :color="comment.like ? '#FF8A52' : '#909399'"
                ></u-icon>
                <view class="num">{{ comment.like_count }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="reply-list">
          <view class="all-reply-top">共{{ comment.reply_count }}条回复</view>
          <view class="item" v-for="(item, index) in commentList" :key="index">
            <view class="comment">
              <view class="heart-photo" @longpress="replyUser(item)"
                ><u-avatar :src="item.avatar_url" size="64" @click="onUser(item.user_id)"></u-avatar
              ></view>
              <view class="right">
                <view class="name">{{ item.nick_name }}</view>
                <view class="content">
                  <template v-if="item.reply_user">
                    回复
                    <text
                      class="reply-name"
                      :style="{
                        color: globPrimaryColor,
                      }"
                      >@{{ item.reply_user }}</text
                    >
                    :
                  </template>
                  {{ item.content }}
                </view>
                <view class="bottom">
                  <view class="date">{{ item.create_time | timeFrom('yyyy-mm-dd') }}</view>
                  <view
                    v-if="glob_user_id == item.user_id"
                    class="del"
                    @click="handleDeleteReply(item.id)"
                    >删除</view
                  >
                  <view class="like" :class="{ highlight: item.like == 1 }" @tap="getLike(index)">
                    <u-icon
                      :name="item.like == 1 ? 'thumb-up-fill' : 'thumb-up'"
                      :size="40"
                      :color="item.like == 1 ? '#FF8A52' : '#909399'"
                    ></u-icon>
                    <view class="num">{{ item.like_count }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </edu-mescroll-body>
    </view>
    <view class="release-placeholder">
      <view class="release-wrap" :style="{ 'padding-bottom': keyboardheight + 10 + 'px' }">
        <view class="input-wrap">
          <textarea
            class="textarea"
            :value="content"
            placeholder-class="placeholder edu-icon edu-icon-home_edit_icon"
            :placeholder="placeholder"
            :show-confirm-bar="false"
            :adjust-position="false"
            :maxlength="200"
            :auto-height="true"
            @focus="questionFocus"
            @blur="questionBlur"
            @input="questionInput"
          />
        </view>
        <edu-button
          type="primary"
          size="medium"
          shape="circle"
          :disabled="replyBtnDisabled"
          @click="reply"
          >发布</edu-button
        >
      </view>
    </view>

    <edu-user-coupon></edu-user-coupon>

    <u-modal
      show-cancel-button
      v-model="deleteVisible"
      :show-title="false"
      cancel-text="取消"
      confirm-text="删除"
      :content="deleteContent"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      cancel-color="#606266"
      :confirm-color="globPrimaryColor"
      @confirm="handleDeleteConfirm"
    >
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      commentList: [],
      comment: {},
      content: '',
      replyId: 0,
      placeholder: '发表你的评论吧～',
      commentId: '',
      deleteVisible: false,
      deleteType: 0,
      deleteContent: '',
      deleteCurrentId: 0,
      keyboardheight: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    // 当前用户是自己id
    glob_user_id() {
      if (this.$u.test.empty(this.userInfo)) return 0
      return this.userInfo.id
    },
    replyBtnDisabled() {
      return this.$u.trim(this.content).length == 0
    },
  },
  onLoad(options) {
    this.commentId = options.id
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 回复列表
    getReply(page) {
      let params = {
        page: page.num,
        count: page.size,
      }
      this.$edu.api.getTopicCommentReply(this.commentId, params).then((res) => {
        const { data } = res
        this.comment = data.comment

        let total = data.commentReply.total
        let list = data.commentReply.data

        if (page.num == 1) this.commentList = []
        this.commentList = this.commentList.concat(list)
        this.mescroll.endBySize(list.length, total)
      })
    },
    // 上拉刷新
    refresh() {
      this.mescroll.resetUpScroll()
    },
    // 点赞
    getLike(index) {
      if (this.$u.test.empty(index)) {
        if (this.commentList[index].like == 1) {
          this.commentList[index].like = 0
          this.commentList[index].like_count--
        } else {
          this.commentList[index].like = 1
          this.commentList[index].like_count++
        }
        this.$edu.api.putTopicCommentReplyLike(this.commentList[index].id, {
          status: this.commentList[index].like,
        })
      } else {
        if (this.comment.like == 1) {
          this.comment.like = 0
          this.comment.like_count--
        } else {
          this.comment.like = 1
          this.comment.like_count++
        }
        this.$edu.api.putTopicCommentLike(this.comment.id, {
          status: this.comment.like,
        })
      }
    },
    // 点评
    reply() {
      let params = {
        reply_user_id: this.replyId,
        content: this.$u.trim(this.content),
      }
      this.$edu.api.createTopicCommentReply(this.commentId, params).then((res) => {
        this.$u.toast(res.msg)
        this.replyDefault()
        this.mescroll.resetUpScroll(false)
        this.mescroll.scrollTo(0, 0)
      })
    },
    // 长按@用户id
    replyUser(item) {
      this.content = ''
      this.replyId = item.user_id
      this.placeholder = `@${item.nick_name}`
    },
    // 输入框恢复默认值
    replyDefault() {
      this.replyId = 0
      this.content = ''
      this.placeholder = '发表你的评论吧～'
    },
    // 个人主页
    onUser(id) {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: id,
        })
      })
    },
    // 删除评论
    handleDeleteComment(id) {
      this.deleteContent = '确认删除该条评论?'
      this.deleteType = 1
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 删除回复
    handleDeleteReply(id) {
      this.deleteContent = '确认删除该条回复?'
      this.deleteType = 2
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 确认删除
    handleDeleteConfirm() {
      if (this.deleteType == 1) {
        this.$edu.api
          .deleteTopicComment(this.deleteCurrentId)
          .then((res) => {
            this.$u.toast(res.msg)
            setTimeout(() => {
              this.$u.route({ type: 'back' })
            }, 250)
          })
          .catch((err) => {
            this.$u.toast(err.msg)
          })
      } else if (this.deleteType == 2) {
        this.$edu.api
          .deleteTopicCommentReply(this.deleteCurrentId)
          .then((res) => {
            this.$u.toast(res.msg)
            setTimeout(() => {
              this.mescroll.resetUpScroll(false)
            }, 250)
          })
          .catch((err) => {
            this.$u.toast(err.msg)
          })
      }
    },
    questionFocus(e) {
      this.keyboardheight = e.detail.height
    },
    questionBlur() {
      this.keyboardheight = 0
    },
    questionInput(e) {
      this.content = e.detail.value
    },
  },
}
</script>

<style lang="scss" scoped>
.reply-wrap {
  background-color: #ffffff;

  .comment {
    padding: 30rpx;
    font-size: 32rpx;
    background-color: #ffffff;
    display: flex;
    align-items: flex-start;
    .right {
      flex: 1;
      margin-left: 20rpx;
      .name {
        color: #606266;
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
      .content {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #303133;
        line-height: 46rpx;
        .reply-name {
          @include text-color();
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        .date {
          font-size: 24rpx;
          font-weight: 400;
          color: #909399;
        }
        .del {
          font-size: 24rpx;
          font-weight: 400;
          color: $edu-content-color;
          margin-left: 24rpx;
        }
        .like {
          display: flex;
          align-items: center;
          margin-left: auto;
        }
        .num {
          margin-left: 4rpx;
          font-size: 24rpx;
          color: #909399;
        }
        .highlight {
          .num {
            color: #ff8a52;
          }
        }
      }
    }
  }
  /deep/.reply-list {
    padding-top: 40rpx;
    border-top: 1rpx solid #f7f7f7;
    .all-reply-top {
      margin-left: 30rpx;
      margin-bottom: 10rpx;
      color: #303133;
      font-size: 32rpx;
      font-weight: bold;
    }
    .comment {
      padding-bottom: 0;
    }
    .item {
      .right {
        margin-right: -30rpx;
        padding-right: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f7f7f7;
      }
    }
  }
}

.release-placeholder {
  height: 110rpx;
}

.release-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 20rpx 30rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  .input-wrap {
    flex: 1;
    margin-right: 20rpx;
    background: #f7f7f7;
    border-radius: 35px;
    padding: 0 25rpx;
    .textarea {
      width: 100%;
      padding: 20rpx 0;
      font-size: 26rpx;
      font-weight: 400;
      color: #303133;
    }
    ::v-deep .placeholder {
      font-size: 26rpx;
      font-weight: 400;
      color: #b7bac1;
      display: flex;
      align-items: center;
      &:before {
        margin-right: 16rpx;
        font-size: 24rpx;
      }
    }
  }
  ::v-deep .edu-btn {
    width: 120rpx;
    padding: 0;
  }
}
</style>
